<script setup lang="ts">
import {ref, watch} from 'vue';

const props = defineProps<{
  visibleProp: Boolean,
  imageLinkProp: String,
  onClose: Function
}>();

// 是否可见
const visible = ref(false);
// 当前图片
const currentImage = ref('');

// 使用 watch 监听属性变化
watch(() => props.visibleProp, (newVal) => {
  visible.value = newVal;
});

watch(() => props.imageLinkProp, (newVal) => {
  currentImage.value = newVal as string;
});

// 关闭图片预览
const closePreview = () => {
  visible.value = false;
  // 调用父组件传递的 onClose 方法触发关闭事件
  props.onClose();
};
</script>

<template>
  <div v-if="visible" class="image-preview">
    <div class="image-preview-content">
      <img :src="currentImage" alt="预览图片"/>
      <el-button @click="closePreview">关闭预览</el-button>
    </div>
  </div>
</template>

<style scoped lang="scss">
.image-preview {
  position: fixed;
  z-index: 999;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
}

.image-preview-content {
  background: #fff;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  text-align: center;
}

.image-preview-content img {
  max-width: 100%;
  max-height: 80vh;
}
</style>